<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background-image: url(img/bodybg2.jpg);
				background-size: cover;
			}
			
			#bg {
				width: 570px;
				height: 570px;
				background-image: url(img/qp.jpg);
				background-position: -200px 0px;
				background-size: cover;
				border-radius: 15px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -285px;
				margin-top: -285px;
			}
			
			#stopdraw {
				width: 500px;
				height: 500px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -250px;
				margin-top: -250px;
				z-index: 1000;
				display: none;
			}
			
			#successed {
				width: 400px;
				height: 300px;
				background-image: url(img/success.png);
				background-size: cover;
				background-repeat: no-repeat;
				background-position-x: -68px;
				position: absolute;
				top: 50%;
				margin-top: -150px;
				left: 50%;
				margin-left: -200px;
				font-weight: bold;
				font-family: "宋体";
				font-size: 40px;
				text-align: center;
				line-height: 250px;
			}
			
			#replay {
				border: 2px solid saddlebrown;
				background-color: burlywood;
				border-radius: 5px;
				width: 130px;
				height: 40px;
				position: relative;
				top: -80px;
				left: 135px;
				color: black;
				font-weight: bold;
				font-size: 22px;
				line-height: 40px;
				font-family: "宋体";
				cursor: url('img/finger.cur'), auto;
			}
			
			
			canvas {
				position: relative;
				top: 50%;
				margin-top: -265px;
				left: 50%;
				margin-left: -265px;
			}
		</style>
		<script>
			var who = 0; //who为0，白棋走，为1黑棋走
			var map = []; //map坐标为0无棋子，1为白棋，2为黑棋
			window.onload = function() {
				var mp3bg = document.getElementById("mp3bg");
				mp3bg.play();
				var mycanvas = document.getElementById("mycanvas");
				var pen = mycanvas.getContext("2d");
				mycanvas.width = 530;
				mycanvas.height = 530;
				drawqp();
				setmap();
				mycanvas.onclick = function() {
					drawchess();
					success();
				}
				mycanvas.onmousemove = function() {
					var mycanvas = document.getElementById("mycanvas");
					mycanvas.style.cursor = "not-allowed";
					for(var b = 0; b < 15; b++) {
						for(var c = 0; c < 15; c++) {
							var myx = event.offsetX - 15;
							var myy = event.offsetY - 15;
							var mapx = b * 500 / 14;
							var mapy = c * 500 / 14;
							if((myx > mapx - 12) && (myx < mapx + 12) && (myy > mapy - 12) && (myy < mapy + 12)) {
								var agent = navigator.userAgent.toLowerCase() ;
								if(agent.indexOf("chrome") > 0) {
									mycanvas.style.cursor = "url('img/finger.cur'), auto";
								}else{
									mycanvas.style.cursor = "pointer";
								}
							}
						}
					}
				}
			}
			//画棋盘
			function drawqp() {
				var mycanvas = document.getElementById("mycanvas");
				var pen = mycanvas.getContext("2d");
				pen.strokeStyle = "black";
				pen.lineWidth = 1;
				pen.strokeRect(0, 0, 530, 530);
				pen.translate(15, 15);
				for(var a = 0; a < 15; a++) {
					pen.beginPath();
					pen.moveTo(0, 500 / 14 * a);
					pen.lineTo(500, 500 / 14 * a);
					pen.stroke();
					pen.beginPath();
					pen.moveTo(500 / 14 * a, 0);
					pen.lineTo(500 / 14 * a, 500);
					pen.stroke();
				}
			}
			//画棋子
			function drawchess() {
				var mp3draw = document.getElementById("mp3draw");
				var mycanvas = document.getElementById("mycanvas");
				var pen = mycanvas.getContext("2d");
				var myx = event.offsetX - 15;
				var myy = event.offsetY - 15;
				for(var b = 0; b < 15; b++) {
					for(var c = 0; c < 15; c++) {
						var mapx = b * 500 / 14;
						var mapy = c * 500 / 14;
						if((myx > mapx - 12) && (myx < mapx + 12) && (myy > mapy - 12) && (myy < mapy + 12)) {
							if(who == 0 && map[b][c] == 0) {
								mp3draw.src = "mp3/五子棋-向下.wav";
								mp3draw.play();
								pen.beginPath();
								var my_gradient = pen.createRadialGradient(mapx + 5, mapy + 5, 8, mapx + 4, mapy + 4, 1);
								my_gradient.addColorStop(0, "darkgray");
								my_gradient.addColorStop(1, "white");
								pen.fillStyle = my_gradient;
								pen.shadowBlur = 15;
								pen.shadowColor = "black";
								pen.arc(mapx, mapy, 12, 0, 2 * Math.PI);
								pen.fill();
								who++;
								map[b][c] = 1;
							} else if(who == 1 && map[b][c] == 0) {
								mp3draw.src = "mp3/五子棋-向下.wav";
								mp3draw.play();
								pen.beginPath();
								var my_gradient = pen.createRadialGradient(mapx + 8, mapy + 8, 9, mapx + 8, mapy + 8, 1);
								my_gradient.addColorStop(0, "black");
								my_gradient.addColorStop(1, "white");
								pen.fillStyle = my_gradient;
								pen.shadowBlur = 15;
								pen.shadowColor = "black";
								pen.arc(mapx, mapy, 12, 0, 2 * Math.PI);
								pen.fill();
								who--;
								map[b][c] = 2;
							}
						}
					}
				}
			}
			//存入当前黑白棋的状态
			function setmap() {
				for(var b = 0; b < 15; b++) {
					map[b] = [];
					for(var c = 0; c < 15; c++) {
						map[b][c] = 0;
					}
				}
			}
			//判断输赢
			function success() {
				var mp3success = document.getElementById("mp3success");
				var stopdraw = document.getElementById("stopdraw");
				var words = document.getElementById("words");
				//e为列，也就是x轴,f为行，也就是y轴
				for(var e = 0; e < map.length; e++) {
					for(var f = 0; f < map[e].length; f++) {
						//行内输赢
						if(e < map.length - 4) {
							if(map[e][f] == 1 && map[e + 1][f] == 1 && map[e + 2][f] == 1 && map[e + 3][f] == 1 && map[e + 4][f] == 1) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜白棋";
								return;
							} else if(map[e][f] == 2 && map[e + 1][f] == 2 && map[e + 2][f] == 2 && map[e + 3][f] == 2 && map[e + 4][f] == 2) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜黑棋";
								return;
							}
						}

						//列内输赢
						if(f < map[e].length - 4) {
							if(map[e][f] == 1 && map[e][f + 1] == 1 && map[e][f + 2] == 1 && map[e][f + 3] == 1 && map[e][f + 4] == 1) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜白棋";
								return;
							} else if(map[e][f] == 2 && map[e][f + 1] == 2 && map[e][f + 2] == 2 && map[e][f + 3] == 2 && map[e][f + 4] == 2) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜黑棋";
								return;
							}
						}

						//左斜输赢
						if(f < map[e].length - 4 && e < map.length - 4) {
							if(map[e][f] == 1 && map[e + 1][f + 1] == 1 && map[e + 2][f + 2] == 1 && map[e + 3][f + 3] == 1 && map[e + 4][f + 4] == 1) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜白棋";
								return;
							} else if(map[e][f] == 2 && map[e + 1][f + 1] == 2 && map[e + 2][f + 2] == 2 && map[e + 3][f + 3] == 2 && map[e + 4][f + 4] == 2) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜黑棋";
								return;
							}

						}
						//右斜输赢,记住下标从0开始
						if(e > 3 && f < map[e].length - 4) {
							if(map[e][f] == 1 && map[e - 1][f + 1] == 1 && map[e - 2][f + 2] == 1 && map[e - 3][f + 3] == 1 && map[e - 4][f + 4] == 1) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜白棋";
								return;
							} else if(map[e][f] == 2 && map[e - 1][f + 1] == 2 && map[e - 2][f + 2] == 2 && map[e - 3][f + 3] == 2 && map[e - 4][f + 4] == 2) {
								mp3success.play();
								stopdraw.style.display = "block";
								words.innerHTML = "恭喜黑棋";
								return;
							}

						}
					}
				}
			}

			function again() {
				var mp3bg = document.getElementById("mp3bg");
				mp3bg.src = "mp3/五子棋_bg 音乐.mp3";
				mp3bg.play();
				document.getElementById("stopdraw").style.display = "none";
				who = 0;
				map = [];
				var mycanvas = document.getElementById("mycanvas");
				var pen = mycanvas.getContext("2d");
				pen.translate(-15, -15);
				pen.clearRect(0, 0, 530, 530);
				drawqp();
				setmap();
			}
		</script>
	</head>

	<body>
		<div id="stopdraw">
			<div id="successed"><span id="words">恭喜白棋</span>
				<div id="replay" onclick="again()">再来一局</div>
			</div>
		</div>
		<div id="bg">
			<canvas id="mycanvas"></canvas>
		</div>
		<audio src="mp3/五子棋_bg 音乐.mp3" id="mp3bg"></audio>
		<audio src="mp3/五子棋-向下.wav" id="mp3draw"></audio>
		<audio src="mp3/五子棋_非盟的胜利.wav" id="mp3success"></audio>
	</body>

</html>